interface ToastOptions {
  message: string;
  type?: 'success' | 'error' | 'warning' | 'info';
  duration?: number;
}

class MessageService {
  private container: HTMLElement | null = null;

  private createContainer() {
    if (!this.container) {
      this.container = document.createElement('div');
      this.container.id = 'toast-container';
      this.container.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
      `;
      document.body.appendChild(this.container);
    }
    return this.container;
  }

  private showToast(options: ToastOptions) {
    const container = this.createContainer();
    const toast = document.createElement('div');
    
    const typeColors = {
      success: '#d4edda',
      error: '#f8d7da',
      warning: '#fff3cd',
      info: '#d1ecf1'
    };

    const textColors = {
      success: '#155724',
      error: '#721c24',
      warning: '#856404',
      info: '#0c5460'
    };

    const type = options.type || 'info';
    const duration = options.duration || 3000;

    toast.style.cssText = `
      background-color: ${typeColors[type]};
      color: ${textColors[type]};
      padding: 12px 20px;
      margin-bottom: 10px;
      border-radius: 6px;
      border: 1px solid rgba(0,0,0,0.1);
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      max-width: 350px;
      word-wrap: break-word;
      animation: slideInRight 0.3s ease-out;
    `;

    toast.textContent = options.message;

    // 添加关闭按钮
    const closeBtn = document.createElement('span');
    closeBtn.innerHTML = '&times;';
    closeBtn.style.cssText = `
      float: right;
      margin-left: 10px;
      cursor: pointer;
      font-weight: bold;
      font-size: 18px;
    `;
    closeBtn.onclick = () => this.removeToast(toast);
    toast.appendChild(closeBtn);

    container.appendChild(toast);

    // 自动移除
    setTimeout(() => {
      this.removeToast(toast);
    }, duration);
  }

  private removeToast(toast: HTMLElement) {
    if (toast.parentNode) {
      toast.style.animation = 'slideOutRight 0.3s ease-in';
      setTimeout(() => {
        if (toast.parentNode) {
          toast.parentNode.removeChild(toast);
        }
      }, 300);
    }
  }

  success(message: string) {
    this.showToast({ message, type: 'success' });
  }

  error(message: string) {
    this.showToast({ message, type: 'error' });
  }

  warning(message: string) {
    this.showToast({ message, type: 'warning' });
  }

  info(message: string) {
    this.showToast({ message, type: 'info' });
  }
}

// 添加CSS动画
const style = document.createElement('style');
style.textContent = `
  @keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes slideOutRight {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }
`;
document.head.appendChild(style);

export const Message = new MessageService(); 